<!--
 * @Author: DaHuaZhuXi
 * @Date: 2020-11-18 10:24:56
 * @LastEditTime: 2020-11-19 18:47:31
 * @LastEditors: DaHuaZhuXi
 * @Description: 后台首页
-->

<template>
  <div class="">
    <div id="myEcharts" style="height: 400px"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class ComponentA extends Vue {
  hello = this.$store.state.test0;

  // public $echarts: any;

  mounted() {
    // 基于准备好的dom，初始化 echarts 实例并绘制图表。
    const ele = document.getElementById('myEcharts') as HTMLDivElement;
    const chart = window.$echarts.init(ele);

    chart.setOption({
      title: { text: 'Line Chart' },
      tooltip: {},
      toolbox: {
        feature: {
          dataView: {},
          saveAsImage: {
            pixelRatio: 2,
          },
          restore: {},
        },
      },
      xAxis: {},
      yAxis: {},
      series: [
        {
          type: 'line',
          smooth: true,
          data: [
            [12, 5],
            [24, 20],
            [36, 36],
            [48, 10],
            [60, 10],
            [72, 20],
          ],
        },
      ],
    });
  }

  // @computed
  get computedMsg(): string {
    return '';
  }

  // @method
  greet() {
    //
  }
}
</script>

<style lang="scss">
</style>
